配置通用的API前缀可以更好在本地通知前过接口代理转发获取数据、或者部署时在Nginx中做反向代理，但是项目中一旦涉及大量的需要文件上传岁猛亩的部分（文件上传不走Ajax的方法），我们需要考虑更好管理接口的baseURL，项目中 Ajax 请求用 axios ，原始代码如下 修改前 // 创建axios实例、配置baseURL、超时时间 const service = axios.create({ baseURL: ’/development/api’, // 从环境进程中根据运行环境获取的api的base_url timeout: 5000 // 请求超时时乎森间 }) /* 保存分配角色 */ export function fetchSaveDisUser (params1) { return fetch({ url: ’/user/empower’, method: ’post’, params: params1, paramsSerializer: function (params) { return Qs.stringify(params, { arrayFormat: ’repeat’ }) } }) } /* 上传文件URL 从运行环境process.env中读取API配置 */ export let uploadUrl = ’/development/api/doi/analys/upload’优化方法 找到config/dev.env.js 和 config/prod.env.js，在代码添加变量 API_BASEURL（名字自定义）如下： module.exports = { NODE_ENV: ’“production“’, // PS:不要复制、开发环境和生产环境有区别 API_BASEURL: ’“/development/api/“’ // 需要自己添加的代码 }然后在需要使用baseURL的地方替换为 process.env. API_BASEURL 修改后代码如下 // 创建axios实例、配置baseURL、超时时间 const service = axios.create({ baseURL: process.env.API_BASEURL, // 从环境进程中根据运行环境获取的api的base_ur timeout: 500

a

全局 axios 默认配置

axios.defaults.baseURL = ’  });

Promises

axios 依赖一个原生的 ES6 Promise 实现，如果你的浏览器环境不支持 ES6 Promises，你需要引入 polyfill

现在没用过vue框架，都不好意思说自己是干前端呢，当然这句话并不是说干前端非得会vue,只是想说明他的火爆程度，现在连小程序都推出了mpvue，你确定你还不赶紧了解了解vue吗，我这篇文章的内容都是些很基础的vue知识，后续会补上

解析 ： 

-  beforecreate ：可以在这加个loading事件 

- created  ：在这结束loading，还做一些初始化，实现函数自执行 

- mounted  ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 

- * beforeDestory * : 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

其中key为对象里面的键，value为对象里面的值，其本意就是动态改变原来已经固定的值值，就需要使用vue.set(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)

解析  

遍历后{{parent.name}}的已经固定了，这时候点击按钮，改变里面的值，虽然后台数据已经发生了改变，但那时页面渲染的效果并不会发生改变，这时候要想改变页面上的值，就需要使用vue.set(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)， 

在空的数组中不能使用push传入数据，所以应当使用vm.$set给数组添加

    ** 使用v-bind动态给元素绑定

这样可以在遍历的时候给不同的元素动态绑定不同id

在下次dom更新循结束之后延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom

在vue中获取当前点击的元素对象，在点击的方法里 传 入$event,然后在methods方法里面接受传过来的值，具体如 下

这个指令保持在元素上直到关联实例结束编译 /，可隐藏为编译的标签直到实例准备完毕

computer也是一个对象，类似于methods,在里面也可以定义很多方法。计算属性的结果会被缓存，写法如下：

前一兄弟元素必须有v-if 或v-else-if

前一兄弟必须有v-if或隐岁v-else-if

vue包含一组观察数组的变异方法，所以它们也会出发视图更新

由于javascript的限制，Vue不能检测一下变动的数组

对于已经创建实例，vue不能动态添加根级别的响应式属性，但是可以使用Vue.set( object, key, value )方法嵌套对象添加响应式属性

props可以是数组或对象，用于接收来父组件的数据，或者使用对象作为替代

1.axios.post(’url’, {data} )

.axios发送跨域请求

  var headers ={

’headers’:{

’Content-Type’:’ application/x-www-from-urlencoded’

  }

  }

a从而获取不到后台传过来的数据

解决办法：在页面中引入qs模块

import qs from’qs’;

axios.interceptors.request.use((config)=》){

config.date=qs.stringify(config.data);

returnconfig;

}

私有过滤器是将过滤器中的方法直接绑定到当前Vue实例上面，所以只能在当前托管区域中使用

全局过滤器相当于是将过滤器中的方法绑定到Vue构造函数的原型中，可以保证每一个Vue实例的托管区域都可以使用

vm在很多时候，页面还未加载出来，不能使用vm，这时我们有两种解决方法 

访问在线试听

如果项目数据过多的话，直接管理是非常不方便的，这时候就应该采用vuex,Vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用所有的组件的状态mui中的灶棚睁区域滚和晌动组件，有个默认阻止冒泡事件，这时候在vue中使用click事件就会无法触发，具体做法是把click事件改为tap事件,只有区域滚动事件click事件才无法生效

vue中的get传参

axios.get(url,{params:{’aa’:hello,’bb’:’baibai’}})

我把图片的id都放入数组，让然后传给你，你再传给我过滤后的图片信息，然后你让我通过自己创建的数组里面的id来对你传过来的图片信息进行处理，可是我自己创建的数组会随着不同按钮而发生改变，

const arr1=;

const arr2=

for(let i arr1){

vm.$set(arr2,i,arr2);

}     

这样得到的arr2 =

var a=;

var b=a.filter((value,index)=》{

value:当前数组对应的值

index:当前值对应的索引

returnindex！=2;

})

在vue中

import Vue from ‘vue’ //es6写法 

import App from ‘./App’

父子组件的通信：emit 

非父子组件之间的通信：event bus 

复杂情况：vuex

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(_或JavaScript框架_)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简友搜罩便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。作者我也是在2015年就开始用jQuery，那时候跟同事比看谁写的代码更短如若看个jQuery源码的同学，j应该知道jq是对原生XHR的封装，另外还增加了jsonp的支持，让ajax请求可以支持跨域请求，但是要注意的是：jsonp请求本质不是XHR异步请求，就是请求了一个js文件，因此在浏览器的network面板中的xhr标签下看不到jsonp的跨域请求，但是在js标签下能看见，因为它利用src特性请求任何一个网站的资源。ajax常规用法$.aja

请求拦截器使用场景：在请求被处理前拦截，做一些操作(例如：登录状态，通常登录成功后，后端会返回一个token，这个token会存储一些信息，这样前端每次发请求时带token才可以访问一些资源)。请求拦截器使用方法(use方法有两个参数，第一个是请求前的回调函数，请求配置，也就是在发送请求前做一些操作。第二个是请求错误的回调函数)拓展：promise有两个函数一个是reslove函数，一般成功时用，reject一般失败错误时用。使用场景：在响应被处理前拦截，做一些操作。响应拦截器使用方法：(use方法有两个参数，第一个是请求皮亏前的回调函数，请求配置，也就是在发送请求前做一些操作。第二个是请求错误的回调函数)拓展：axios.get().then(res=》{})中的then相当于发送请求成功后的回调函数，而axios.get().catch(err=》{})相当于请求成功，对响应失败的处理，也就是reject的err会触发catch方法。请求错误和响应错误区别：请求错误表示请求没有到达后端，浏览器会报一些错误，比如请求接口没有，就会报404。例如：从数据库查询某一条记录，但是没有，后台返回一个状态码和错误信息，此时就是响应错误(请求到达后端，返回错误称为响应错误。没到达后端，成为请求错误)。取消拦截器使用方法使用场景：对拦截器进行取消。拓展：一般使用拦截器时，都是声明一个变量，给实例添加拦截器，给实例添加属性，一般不会给axios添加内容，避免造成全雹握斗局污染。拓展：当在请求拦截器中，对headers的属性进行赋值时，通常使用config.headers.token=’’,而不是config.headers={token:‘’},因为第二种方式会把headers里的其他属性覆盖掉。不同axios实例访问不同接口，不同axios实例有不同拦截器，从而实源磨现有需要拦截，有不需要拦截的。请求拦截器其他使用场景：比如某一个请求，可能需要几秒，此时我们可以通过请求拦截器添加一个页面的等待的样式，等数据响应回来时再取消这个样式。

你好，vue中axios分服务需孙敏历要在前端主机安装Nginx，配置Nginx主配置文件进行路由转发，则搜启动Nginx服务器拿仔。希望以后帮助到你。

1、功能不同

Axios：Axios 是一个基于 promise 的 HTTP 库，陵悄可空销以用在浏览器和 node.js 中。

AJAX：AJAX 是斗汪游与服务器交换数据并更新部分网页的，在不重新加载整个页面的情况下Ajax = 异步 Java指定的配置将与实例的配置合并

axios#request(config)

axios#get(url)

axios#delete(url)

axios#head(url)

axios#post(url)

axios#put(url)

axios#patch(url)

说明两点：interceptor必须在请求前设置才有效。直接为axios全局对象创建interceptor，会导致全局的axios发出的请求或接收的响应都会被拦截到，所以应该使用戚孙态axios.create()来创建单独的axios实例。官方原话：You can add interceptors to a custom instance of axios.var instance = axios.create();instance.interceptors.request.use(function () {/*...*/});用vue-cli创建了个测试项目，代码如下：高源Hello.vue《script》import axios from ’axios’export default {name: ’hello’,data () {return {msg: ’Welcome to Your Vue.js App’}},methods: {getImg () {axios.get(’《/script》

如果您没有正确配置Axios的请求路径，那么您可以使用Axios的baseURL属性来配置请求路径，也可以使用Axios的url属性来配置请求乱掘氏路径。您也可以在发送请求时哗散散坦使用Axios的url参数来指定请求路径。另外，您还可以使用Axios的create方法来创建一个新的Axios实例，并使用baseURL属性来配置请求路径。

由于mutation不支持异步操作，所以vuex又提供了action，这个可以支持异步，在有些情况下就会非常方便。

异步操作分为两种情况，一个是内部的异步操作，一个是外部的异步操作。

比如访问后端API获取数据的时候，又或者把数据存入前端存储的时候。

我们先写个简单的拍含例子

看看参数

我们new 一个 Promise就可以了，里面可以用axios等各种操作。 最后记得返回new出来的实例。

如果不需要知道确定的完成时间的话，可以直接调用

如果要知道的话，可以写个then

这颂或个用法和axios非常相似。

看看运行效果

我野贺伍们可以自己new 一个promise把axios包含进去，也可以直接返回axios的实例，比如这样

调用方式

这样内部和外部都可以得到axios返回的数据。

如何选择就看对返回数据的封装程度了。

https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-vuex